<?xml version='1.0' encoding='utf-8'?>
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="nl_NL" xml:lang="nl_NL">
 <head>
  <title>Brew Gear</title>

  <link rel="stylesheet" href="css/jquery.autocomplete.css" type="text/css" />
  <link rel="stylesheet" href="css/brewgear.css" type="text/css" />
  <link rel="stylesheet" href="css/brewgear.print.css" type="text/css" media="print" />

  <!--[if IE]>
   <style type="text/css">
    #you-have-ie { display: block; }
    #no-database, #spinner, #s_style, #s_menu { display: none; }
   </style>
  <![endif]-->

  <script type="text/javascript" src="js/console.js"></script>

  <script type="text/javascript" src="js/jquery-1.4.2.js"></script>
  <script type="text/javascript" src="js/jquery.autocomplete.js"></script>
  <script type="text/javascript" src="js/jquery.easydrag.js"></script>
  <script type="text/javascript" src="js/jquery.tablednd.js"></script>

  <script type="text/javascript" src="js/gears_init.js"></script>
  <script type="text/javascript" src="js/gears_wrapper.js"></script>
   
  <script type="text/javascript" src="js/brewgear.jquery.js"></script>
  <script type="text/javascript" src="js/brewgear.math.js"></script>
  <script type="text/javascript" src="js/brewgear.db.js"></script>
  <script type="text/javascript" src="js/brewgear.autocomplete.js"></script>
  <script type="text/javascript" src="js/brewgear.storage.js"></script>
  <script type="text/javascript" src="js/brewgear.export.js"></script>
  <!--
  <script type="text/javascript" src="js/brewgear.import.js"></script>
 -->
  <script type="text/javascript" src="js/brewgear.js"></script>
  
  <script type="text/javascript" src="data/ebc2rgb.js"></script>

 </head>
 <body id="recipe">

  <div id="you-have-ie" class="warning">
   <p>Beste gebruiker,</p>
   <p>U maakt momenteel gebruik van Internet Explorer (IE), de browser van Microsoft.</p>
   <p>Deze pagina laat zich niet goed tonen in deze browser. Ook de Javascript
   functionaliteit werkt niet. Dit heeft te maken met het feit dat IE zich
   niets aantrekt van de <a
    href="http://www.webstandards.org/">web-standaarden</a> welke door het <a
    href="http://w3c.org">World Wide Web Consortium</a> (W3C) zijn
   gespecificeerd.</p>
   <p>Bij deze wil de auteur u een van de alternatieve browsers aanbevelen, te weten:</p>
   <ul>
    <li>Mozilla's <a href="http://www.mozilla-europe.org/nl">FireFox</a></li>
    <li>Apple's <a href="http://www.apple.com/nl/safari">Safari</a></li>
   </ul>
   <p>Bij beide browsers is het mogelijk een database (in de browser) te hosten,
    zodat recepten opgeslagen kunnen worden.</p>
  </div>

  <div id="no-database" class="warning">
   <p>Om de volledige functionaliteit van deze pagina te benutten heeft u een
    database ondersteuning nodig in de browser.</p>
   <p>Deze is standaard aanwezig in <a href="http://www.apple.com/nl/safari">
    Safari</a>, de web browser van Apple. Ook <a href="http://www.mozilla-europe.org/nl">FireFox</a>
    met <a href="http://gears.google.com">Google Gears</a> plugin is een optie.</p>
   <p>Wij raden u deze browsers van harte aan. Ook voor Windows gebruikers!</p>
  </div>
 
  <div id="spinner">
   <img src="images/spinner.gif" alt="O" />
  </div>

  <div id="wrapper">
  
   <div id="s_name">
    <h1><input type="text" name="batch" id="batch" />Brouwformulier <span id="changed" title="bewerkt">*</span></h1> 
    <p><label for="name">Naam:</label><input type="text" name="name" id="name" />
     <label for="brew-date">Datum:</label><input type="text" name="brew-date" id="brew-date" class="date" /></p>
    <p>
     <input type="hidden" name="style-id" id="style-id" />
     <label for="klasse">Klasse:</label><input type="text" name="klasse" id="klasse" disabled="disabled" />
     <label for="style">Type:</label><input type="text" name="style" id="style" />
    </p>
   </div>
   
   <div id="s_general">
    <h2>Algemeen</h2>
    
    <div id="color"></div>

    <div class="primary">
    <p><label for="planned-og">Doeldichtheid:</label>
    <input type="text" name="planned-og" id="planned-og" class="number" /> g/l</p>
    <p><label for="batch-size">Doelvolume:</label>
     <input type="text" name="batch-size" id="batch-size" class="real" /> l</p>
    <p><label for="brewhouse-efficiency">Brouwzaalrendement:</label>
     <input type="text" name="brewhouse-efficiency" id="brewhouse-efficiency" class="real" /> %</p>
    </div>

    <p><label for="stamwort">Stamwort:</label>
     <input type="text" name="stamwort" id="stamwort" class="number" disabled="disabled" /> &deg;Plato</p>
    <p class="noprint"><label for="total-yield">Totale extract:</label>
     <input type="hidden" name="mash-yield" id="mash-yield" class="number" />
     <input type="hidden" name="boil-yield" id="boil-yield" class="number" />
     <input type="hidden" name="ferm-yield" id="ferm-yield" class="number" />
     <input type="text" name="total-yield" id="total-yield" class="number" disabled="disabled" /> g</p>
    <p class="onlyprint"><label for="print-ebc">Kleur:</label>
     <input type="text" name="print-ebc" id="print-ebc" class="number" /> EBC (<span id="print-color-method"></span>)</p>
    <p class="onlyprint"><label for="print-bitterness">Bitterheid:</label>
     <input type="text" name="print-bitterness" id="print-bitterness" class="number" /> EBU (<span id="print-bitterness-method"></span>)</p>
     
   </div>
   
   <div id="s_style">
    <h2>Stijl definitie</h2>
    <p>Soortelijk gewicht: <span id="style-og-min"></span> - <span id="style-og-max"></span> g/l</p>
    <p>Alcohol: <span id="style-alcohol-min"></span> - <span id="style-alcohol-max"></span> %vol</p>
    <p>Vergistingsgraad: <span id="style-attenuation-min"></span> - <span id="style-attenuation-max"></span> %</p>
    <p>Kleur: <span id="style-ebc-min"></span> - <span id="style-ebc-max"></span> EBC</p>
    <p>Bitterheid: <span id="style-ibu-min"></span> - <span id="style-ibu-max"></span> EBU</p>
    <p>CO<sub>2</sub>: <span id="style-co2g-min"></span> - <span id="style-co2g-max"></span> gew%</p>
    <p>CO<sub>2</sub>: <span id="style-co2v-min"></span> - <span id="style-co2v-max"></span> vol</p>
   </div>
   
   <div id="s_fermentables">
    <h2>Granen, suikers</h2>
    <table>
     <thead>
      <tr>
       <th title="selecteer een naam uit de lijst">naam</th>
       <th class="numerical">opbrengst(%)</th>
       <th class="numerical">vocht (%)</th>
       <th class="numerical">kleur (EBC)</th>
       <th  class="numerical" title="past begin SG, kleur en percentages aan">gewicht (g)</th>
       <th  class="numerical" title="past gewicht en kleur aan">% stort</th>
       <th title="tijdens maischen, koken of vegisting" colspan="2">toevoegen</th>
      </tr>
     </thead>
     <tfoot>
      <tr class="summary">
       <td colspan="3">
        <span class="noprint">
         <label for="color-method">Volgens:</label>
         <button name="color-method" id="color-method" class="multistate" data-multistate="daniels:Daniels,morey:Morey,mosher:Mosher"></button>
        </span>
       </td>
       <td><input type="text" name="ebc" id="ebc" class="number noprint" disabled="disabled" /></td>
       <td>
        <input type="hidden" name="mash-amount" id="mash-amount" class="number" />
        <input type="hidden" name="boil-amount" id="boil-amount" class="number" />
        <input type="hidden" name="ferm-amount" id="ferm-amount" class="number" />
        <input type="text" name="total-amount" id="total-amount" class="number" disabled="disabled" />
       </td>
       <td><input type="text" name="total-percentage" id="total-percentage" class="real" disabled="disabled" /></td>
       <td><a href="#" title="rij toevoegen" class="add">+</a></td>
      </tr>
     </tfoot>
     <tbody id="malt">
      <tr class="malt">
       <td><input type="text" name="malt-name" /><input type="hidden" name="malt-id" /></td>
       <td><input type="text" name="malt-yield" class="real" disabled="disabled" /></td>
       <td><input type="text" name="malt-moisture" class="real" disabled="disabled" /></td>
       <td><input type="text" name="malt-ebc" class="real" disabled="disabled" /></td>
       <td><input type="text" name="malt-amount" class="real" /></td>
       <td><input type="text" name="malt-percentage" class="real" /></td>
       <td><button name="malt-added" class="multistate" data-multistate="mash:maisch,boil:koken,ferm:vergisting"></button></td>
       <td><a href="#" title="verwijder" class="delete">X</a></td>
      </tr>
      <tr class="malt">
       <td><input type="text" name="malt-name" /><input type="hidden" name="malt-id" /></td>
       <td><input type="text" name="malt-yield" class="real" disabled="disabled" /></td>
       <td><input type="text" name="malt-moisture" class="real" disabled="disabled" /></td>
       <td><input type="text" name="malt-ebc" class="real" disabled="disabled" /></td>
       <td><input type="text" name="malt-amount" class="real" /></td>
       <td><input type="text" name="malt-percentage" class="real" /></td>
       <td><button name="malt-added" class="multistate" data-multistate="mash:maisch,boil:koken,ferm:vergisting"></button></td>
       <td><a href="#" title="verwijder" class="delete">X</a></td>
      </tr>
      <tr class="malt">
       <td><input type="text" name="malt-name" /><input type="hidden" name="malt-id" /></td>
       <td><input type="text" name="malt-yield" class="real" disabled="disabled" /></td>
       <td><input type="text" name="malt-moisture" class="real" disabled="disabled" /></td>
       <td><input type="text" name="malt-ebc" class="real" disabled="disabled" /></td>
       <td><input type="text" name="malt-amount" class="real" /></td>
       <td><input type="text" name="malt-percentage" class="real" /></td>
       <td><button name="malt-added" class="multistate" data-multistate="mash:maisch,boil:koken,ferm:vergisting"></button></td>
       <td><a href="#" title="verwijder" class="delete">X</a></td>
      </tr>
      <tr class="malt">
       <td><input type="text" name="malt-name" /><input type="hidden" name="malt-id" /></td>
       <td><input type="text" name="malt-yield" class="real" disabled="disabled" /></td>
       <td><input type="text" name="malt-moisture" class="real" disabled="disabled" /></td>
       <td><input type="text" name="malt-ebc" class="real" disabled="disabled" /></td>
       <td><input type="text" name="malt-amount" class="real" /></td>
       <td><input type="text" name="malt-percentage" class="real" /></td>
       <td><button name="malt-added" class="multistate" data-multistate="mash:maisch,boil:koken,ferm:vergisting"></button></td>
       <td><a href="#" title="verwijder" class="delete">X</a></td>
      </tr>
      <tr class="malt">
       <td><input type="text" name="malt-name" /><input type="hidden" name="malt-id" /></td>
       <td><input type="text" name="malt-yield" class="real" disabled="disabled" /></td>
       <td><input type="text" name="malt-moisture" class="real" disabled="disabled" /></td>
       <td><input type="text" name="malt-ebc" class="real" disabled="disabled" /></td>
       <td><input type="text" name="malt-amount" class="real" /></td>
       <td><input type="text" name="malt-percentage" class="real" /></td>
       <td><button name="malt-added" class="multistate" data-multistate="mash:maisch,boil:koken,ferm:vergisting"></button></td>
       <td><a href="#" title="verwijder" class="delete">X</a></td>
      </tr>
      <tr class="malt">
       <td><input type="text" name="malt-name" /><input type="hidden" name="malt-id" /></td>
       <td><input type="text" name="malt-yield" class="real" disabled="disabled" /></td>
       <td><input type="text" name="malt-moisture" class="real" disabled="disabled" /></td>
       <td><input type="text" name="malt-ebc" class="real" disabled="disabled" /></td>
       <td><input type="text" name="malt-amount" class="real" /></td>
       <td><input type="text" name="malt-percentage" class="real" /></td>
       <td><button name="malt-added" class="multistate" data-multistate="mash:maisch,boil:koken,ferm:vergisting"></button></td>
       <td><a href="#" title="verwijder" class="delete">X</a></td>
      </tr>
      <tr class="malt">
       <td><input type="text" name="malt-name" /><input type="hidden" name="malt-id" /></td>
       <td><input type="text" name="malt-yield" class="real" disabled="disabled" /></td>
       <td><input type="text" name="malt-moisture" class="real" disabled="disabled" /></td>
       <td><input type="text" name="malt-ebc" class="real" disabled="disabled" /></td>
       <td><input type="text" name="malt-amount" class="real" /></td>
       <td><input type="text" name="malt-percentage" class="real" /></td>
       <td><button name="malt-added" class="multistate" data-multistate="mash:maisch,boil:koken,ferm:vergisting"></button></td>
       <td><a href="#" title="verwijder" class="delete">X</a></td>
      </tr>
      <tr class="malt">
       <td><input type="text" name="malt-name" /><input type="hidden" name="malt-id" /></td>
       <td><input type="text" name="malt-yield" class="real" disabled="disabled" /></td>
       <td><input type="text" name="malt-moisture" class="real" disabled="disabled" /></td>
       <td><input type="text" name="malt-ebc" class="real" disabled="disabled" /></td>
       <td><input type="text" name="malt-amount" class="real" /></td>
       <td><input type="text" name="malt-percentage" class="real" /></td>
       <td><button name="malt-added" class="multistate" data-multistate="mash:maisch,boil:koken,ferm:vergisting"></button></td>
       <td><a href="#" title="verwijder" class="delete">X</a></td>
      </tr>
     </tbody>
    </table>
   </div> <!-- fermentables -->
   
   <div id="s_hops">
    <h2>Hop</h2>
    
    <table>
     <thead>
      <tr>
       <th>naam</th>
       <th class="numerical">alpha%</th>
       <th class="numerical">gewicht (g)</th>
       <th class="numerical">tijd (min)</th>
       <th class="numerical">IBU</th>
       <th></th>
      </tr>
     </thead>
     <tfoot>
      <tr class="summary noprint">
       <td colspan="4"><label for="bitterness-method">Volgens:</label>
        <button name="bitterness-method" id="bitterness-method" class="multistate" data-multistate="tinseth:Tinseth,daniels:Daniels,rager:Rager,garetz:Garetz"></button>
       </td>
       <td><input type="text" name="total-bitterness" id="total-bitterness" class="number" disabled="disabled" /></td>
      </tr>
     </tfoot>
     <tbody id="hop">
      <tr class="hop">
       <td><input type="text" name="hop-name" /></td>
       <td><input type="text" name="hop-alpha" class="real" /></td>
       <td><input type="text" name="hop-amount" class="real" /></td>
       <td><input type="text" name="hop-boiltime" class="number" /></td>
       <td><input type="text" name="hop-bitterness" class="number" disabled="disabled" /></td>
       <td><a href="#" title="verwijder" class="delete">X</a></td>
      </tr>
      <tr class="hop">
       <td><input type="text" name="hop-name" /></td>
       <td><input type="text" name="hop-alpha" class="real" /></td>
       <td><input type="text" name="hop-amount" class="real" /></td>
       <td><input type="text" name="hop-boiltime" class="number" /></td>
       <td><input type="text" name="hop-bitterness" class="number" disabled="disabled" /></td>
       <td><a href="#" title="verwijder" class="delete">X</a></td>
      </tr>
      <tr class="hop">
       <td><input type="text" name="hop-name" /></td>
       <td><input type="text" name="hop-alpha" class="real" /></td>
       <td><input type="text" name="hop-amount" class="real" /></td>
       <td><input type="text" name="hop-boiltime" class="number" /></td>
       <td><input type="text" name="hop-bitterness" class="number" disabled="disabled" /></td>
       <td><a href="#" title="verwijder" class="delete">X</a></td>
      </tr>
      <tr class="hop">
       <td><input type="text" name="hop-name" /></td>
       <td><input type="text" name="hop-alpha" class="real" /></td>
       <td><input type="text" name="hop-amount" class="real" /></td>
       <td><input type="text" name="hop-boiltime" class="number" /></td>
       <td><input type="text" name="hop-bitterness" class="number" disabled="disabled" /></td>
       <td><a href="#" title="verwijder" class="delete">X</a></td>
      </tr>
      <tr class="hop">
       <td><input type="text" name="hop-name" /></td>
       <td><input type="text" name="hop-alpha" class="real" /></td>
       <td><input type="text" name="hop-amount" class="real" /></td>
       <td><input type="text" name="hop-boiltime" class="number" /></td>
       <td><input type="text" name="hop-bitterness" class="number" disabled="disabled" /></td>
       <td><a href="#" title="verwijder" class="delete">X</a></td>
      </tr>
      <tr class="hop">
       <td><input type="text" name="hop-name" /></td>
       <td><input type="text" name="hop-alpha" class="real" /></td>
       <td><input type="text" name="hop-amount" class="real" /></td>
       <td><input type="text" name="hop-boiltime" class="number" /></td>
       <td><input type="text" name="hop-bitterness" class="number" disabled="disabled" /></td>
       <td><a href="#" title="verwijder" class="delete">X</a></td>
      </tr>
     </tbody>
    </table>
    <p><label for="bu-gu-ratio">BU:GU ratio:</label>
     <input type="text" name="bu-gu-ratio" id="bu-gu-ratio" class="real" disabled="disabled" /></p>
   </div> <!-- hops-->
   
   <div id="s_mash">
    <h2>Maisch schema</h2>
    <div class="primary">
     <table id="mash">
      <thead>
       <tr>
        <th>stap</th>
        <th class="numerical">T (&deg;C)</th>
        <th class="numerical">tijd (min)</th>
        <th></th>
       </tr>
      </thead>
      <tbody>
       <tr class="step">
        <td><input type="text" name="step-name" /></td>
        <td><input type="text" name="step-temp" class="real" /></td>
        <td><input type="text" name="step-time" class="real" /></td>
        <td><a href="#" title="verwijder" class="delete">X</a></td>
       </tr>
       <tr class="step">
        <td><input type="text" name="step-name" /></td>
        <td><input type="text" name="step-temp" class="real" /></td>
        <td><input type="text" name="step-time" class="real" /></td>
        <td><a href="#" title="verwijder" class="delete">X</a></td>
       </tr>
       <tr class="step">
        <td><input type="text" name="step-name" /></td>
        <td><input type="text" name="step-temp" class="real" /></td>
        <td><input type="text" name="step-time" class="real" /></td>
        <td><a href="#" title="verwijder" class="delete">X</a></td>
       </tr>
       <tr class="step">
        <td><input type="text" name="step-name" /></td>
        <td><input type="text" name="step-temp" class="real" /></td>
        <td><input type="text" name="step-time" class="real" /></td>
        <td><a href="#" title="verwijder" class="delete">X</a></td>
       </tr>
       <tr class="step">
        <td><input type="text" name="step-name" /></td>
        <td><input type="text" name="step-temp" class="real" /></td>
        <td><input type="text" name="step-time" class="real" /></td>
        <td><a href="#" title="verwijder" class="delete">X</a></td>
       </tr>
      </tbody>
     </table>
    </div>
    <p><label for="volume-mash">Maischwater:</label>
    <input type="text" name="volume-mash" id="volume-mash" class="real" /> l</p>
    <p><label for="beslagdikte">Beslagdikte:</label>
     <input type="text" name="beslagdikte" id="beslagdikte" class="real" disabled="disabled" /> l/kg</p>
     <p><label for="volume-begin-mash">Volume na storten:</label>
     <input type="text" name="volume-begin-mash" id="volume-begin-mash" class="real" disabled="disabled" /> l</p>
   </div> <!-- mash -->
   
   <div id="s_filter">
    <h2>Filteren</h2>
    <div class="primary">
    <p><label for="volume-filter">Water toevoegen:</label>
     <input type="text" name="volume-filter" id="volume-filter" class="real lockable" /> l</p>
    <p><label for="loss-after-filter">Blijft achter in filterkuip:</label>
    <input type="text" name="loss-after-filter" id="loss-after-filter" class="real" /> l (80&deg;C)</p>
    </div>
    <p><label for="efficiency">Behaald rendement:</label>
    <input type="text" name="efficiency" id="efficiency" class="real" disabled="disabled" /> %</p>
   </div> <!-- filter -->
   
   <div id="s_boil">
    <h2>Koken</h2>
    <div class="primary">
     <p><label for="volume-before-boil">Volume voor koken:</label>
     <input type="text" name="volume-before-boil" id="volume-before-boil" class="real lockable" /> l (100&deg;C)</p>
     <p><label for="og-before-boil">Dichtheid voor koken:</label>
     <input type="text" name="og-before-boil" id="og-before-boil" class="real lockable" /> g/l</p>
     <p><label for="boiltime">Kooktijd:</label>
     <input type="text" name="boiltime" id="boiltime" class="real" /> min.</p>
     <p><label for="evaporation">Verdamping:</label>
     <input type="text" name="evaporation" id="evaporation" class="real" /> l/uur</p>
    </div>
    <p><label for="volume-after-boil">Volume na koken:</label>
    <input type="text" name="volume-after-boil" id="volume-after-boil" class="real lockable" /> l (100&deg;C)</p>
    <p><label for="og">Dichtheid na koken:</label>
    <input type="text" name="og" id="og" class="number lockable" /> g/l</p>
    <p class="noprint"><label for="loss-after-boil">Blijft achter in ketel:</label>
    <input type="text" name="loss-after-boil" id="loss-after-boil" class="real" /> l</p>
    <p><label for="volume-fermenter">Volume in gistvat:</label>
    <input type="text" name="volume-fermenter" id="volume-fermenter" class="real lockable" /> l</p>
   </div> <!-- boil -->
   
   <div id="s_yeast">
    <h2>Gist</h2>
    <p><label for="yeast">Gist:</label>
    <input type="text" name="yeast" id="yeast" /></p>
    <p><label for="starter">Giststarter:</label>
    <input type="text" name="starter" id="starter" class="real" /> l vergist bij
    <input type="text" name="starter-temp" id="starter-temp" class="real" /> &deg;C </p>
   </div> <!-- yeast -->
   
   <div id="s_fermentation">
    <h2>Fermentatie</h2>
    <table>
     <thead>
      <tr>
       <th></th><th>Startdatum</th><th>Temperatuur</th><th>belucht</th><th>SG aan eind</th>
      </tr>
     </thead>
     <tbody>
      <tr>
       <td>Primair:</td>
       <td><input type="text" name="start-primary" class="date" /></td>
       <td><input type="text" name="temperature-primary" class="real" /></td>
       <td><input type="text" name="aeration-primary" class="real" /></td>
       <td><input type="text" name="fg-primary" class="real" /></td>
      </tr>
      <tr>
       <td>Lagering:</td>
       <td><input type="text" name="start-secundary" class="date" /></td>
       <td><input type="text" name="temperature-secundary" class="real" /></td>
       <td></td>
       <td><input type="text" name="fg-secundary" id="fg-secundary" class="real" /></td>
      </tr>
     </tbody>
    </table>

    <p><label for="svg">Schijnbare vergistingsgraad:</label><input type="text" name="svg" id="svg" class="real" disabled="disabled" /> %</p>
   </div> <!-- yeast -->

   <div id="s_bottling">
    <h2>Bottelen</h2>
    <p><label for="bottle-date">Botteldatum:</label><input type="text" name="bottle-date" id="bottle-date" class="date" />
    <label for="bottle-volume">Volume:</label><input type="text" class="real" name="bottle-volume" id="bottle-volume" /> l</p>
    <p><label for="priming-amount">Navergisting:</label>
    <input type="text" name="priming-amount" id="priming-amount" class="real" />
    g/l <input type="text" name="priming-name" id="priming-name" />
    <input type="hidden" name="priming-id" id="priming-id" />
    <input type="hidden" name="priming-factor" id="priming-factor" /> (totaal <span id="priming-total"></span> g)</p>
    <p><label for="co2v">CO<sub>2</sub>:</label>
    <input type="text" name="co2v" id="co2v" class="real" /> vol
    <label for="alcohol">Alcohol:</label>
    <input type="text" name="alcohol" id="alcohol" class="real" disabled="disabled" /> %vol</p>
   </div> <!-- bottling -->

   <div id="s_notes">
    <h2>Notities</h2>
    <textarea id="notes" rows="2" cols="80"></textarea>
    <div id="print-notes"></div>
   </div> <!-- notes -->
   
   <!--
   <div id="s_judgement">
    <h2>Beoordeling</h2>
    <label for="judge-date">Proefdatum:</label>
    <input type="text" name="judge-date" id="judge-date" />
    <label for="judge-color">Kleur:</label>
    <input type="text" name="judge-color" id="judge-color" />
    <label for="judge-clear">Helderheid:</label>
    <input type="text" name="judge-clear" id="judge-clear" />
    <label for="judge-foam">Schuim:</label>
    <input type="text" name="judge-foam" id="judge-foam" />
    <label for="judge-aroma">Geur:</label>
    <input type="text" name="judge-aroma" id="judge-aroma" />
    <label for="judge-taste">Smaak:</label>
    <input type="text" name="judge-taste" id="judge-taste" />
    <label for="judge-mouthfeel">Mondgevoel:</label>
    <input type="text" name="judge-mouthfeel" id="judge-mouthfeel" />
    <label for="judge-after">Nasmaak:</label>
    <input type="text" name="judge-after" id="judge-after" />
    <label for="judge-remark">Opmerkingen:</label>
    <input type="text" name="judge-remark" id="judge-remark" />
   </div> <!- - judgement -->
 
   <div id="s_menu" class="buttonbar">
    <h2>Menu</h2>
    <button id="clear">Nieuw</button>
    <button id="load">Open...</button><hr />
    <button id="save">Opslaan</button>
    <button id="copy">Opslaan (kopie)</button><hr />
    <!-- <button id="import">Importeren...</button><hr /> -->
    <button id="print">Afdrukken...</button>
    <button id="export">Exporteren...</button>
    <p id="statusbar"></p>
   </div>

   <div id="s_toolbox" class="
   <div id="footer" title="Google Gears powered">
    <p><img src="images/brewgear.png" id="logo" alt="BrewGear" />
    BrewGear v<span id="version">2.0</span></p>
   </div>

  </div> <!-- wrapper -->
  
  <div id="filedialog" class="dialog" title="Open een recept">
   <h1>Open a recipe</h1>
   <select name="recipe-to-open" size="12">
    <option value="0">New</option>
   </select>
   <div class="buttonbar">
    <button type="submit" name="open">Open</button>
    <button name="delete">Verwijder</button>
    <button name="close">Sluit</button>
   </div>
  </div>
  
  <div id="exportdialog" class="dialog" title="Export">
   <h1>Exporteer naar BrouwHulpXml</h1>
   <textarea cols="60" rows="14"></textarea>
   <p>Kopi&euml;er bovenstaande XML (Ctrl-A, Ctrl-C) in een bestand</p>
   <div class="buttonbar">
    <button name="close">Sluit</button>
   </div>
  </div>
  
  <div id="importdialog" class="dialog" title="Import">
   <h1>Importeer BeerXml</h1>
   <ol>
    <li id="importstep1">Selecteer een bestand om te importeren:<br />
     <input type="file" name="importfile" id="importfile" /></li>
    <li id="importstep2">Klik daarna op "Import"</li>
    <li id="importstep3">Match
    </li>
   </ol>
   <div class="buttonbar">
    <button type="submit" name="import">Import</button>
    <button name="close">Sluit</button>
   </div>
  </div>

 </body>
<!--
  vim:sw=1:et:ai
  -->
</html>
